<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Dom操作--删除</title>
    <style>
       table,td{border:1px solid #ddd;}
       table{border-collapse:collapse;width:100%;}
       td{padding:10px;}
    </style>
    <script src="../../day4/day4/04-event/楼梯/js/jquery-1.12.0.js" type="text/javascript" charset="utf-8"></script>
    <script>
    $(function() {
        // $('td:has(button)').css('text-align','right');
        var $delTd = $('td').has('button').css('text-align','right');

        // remove删除页面上的元素
        // empty清空所有子元素
        $delTd.find('button').click(function(){
            // $(this).parents('tr').remove();
            // $(this).closest('tr').remove();
            // $(this).closest('td').text('');
            // 
             $(this).closest('tr').empty();
        });
    });
    </script>
</head>

<body>
    <table><tr><td>
        <table id="data-list">
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>01</td>
                <td>02</td>
                <td>03</td>
                <td>04</td>
                <td><button>删除</button></td>
            </tr>
        </table>
    </td>
    </tr>
    </table>
</body>

</html>
